<template>
    <div class="Content">

        <div class="btn-wrapper">
            <el-select class="bgFFF" v-model="List1Value" placeholder=" " style="margin: 0 20px;" @change="changeFn">
                <el-option v-for="(item, index) in List1" :key="item.key" :label="item.label" :value="item.key">
                </el-option>
            </el-select>
            <div style="display: flex;">
                <el-button size="mini" style="width: 32px;max-width: 32px;" @click="sort('top')">
                    <i class="el-icon-caret-top"></i>
                </el-button>
                <el-button size="mini" style="width: 32px;max-width: 32px;" @click="sort('bottom')">
                    <i class="el-icon-caret-bottom"></i>
                </el-button>
                <el-button @click="addEdit">
                    {{ $t("message.environmentSetting.btns.topBtn.save") }}
                </el-button>
                <el-button @click="deltDataFn">
                    {{ $t("message.environmentSetting.btns.topBtn.del") }}
                </el-button>
            </div>
        </div>

        <ux-grid :data="tableData" :border="true" :header-cell-style="{
            color: 'rgba(0, 0, 0, 0.85)',
            fontSize: '14px',
            textAlign: 'left',
            fontWeight: 'bold',
            padding: 0,
            height: '32px',
            background: '#F5F5F5',
        }" :cell-style="{
            color: 'rgba(96,98,102,1)',
            fontSize: '14px',
            textAlign: 'left',
            padding: 0,
            height: '32px',
        }" :row-style="{
            color: 'rgba(96,98,102,1)',
            fontSize: '13px',
            textAlign: 'left',
            padding: 0,
            height: '32px',
        }" max-height="758" ref="uxGrid" :height="tableHeight" v-loading="loading"
            element-loading-spinner="el-icon-loading" @cell-click="handClick" element-loading-background="#f8f8f8"
            :element-loading-text="$t('message.bhView.loading')">
            <template slot="empty"> No data </template>
            <!-- <ux-table-column style="pointer-events:none;" type="checkbox" width="35"> </ux-table-column> -->
            <ux-table-column property="dtlName" :title="$t('message.environmentSetting.term.table.column_1')"
                width="200" align="center">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.dtlName" class="table-input"
                        @input="scope.row.dtlName = $setMaxLength(scope.row.dtlName, 50)">
                    </el-input>
                </template>
            </ux-table-column>
            <ux-table-column property="unitCode" title="単位" width="200" align="center">
                <template slot-scope="scope">
                    <el-select class="SELE" v-model="scope.row.unitCode" placeholder=" ">
                        <el-option v-for="(item, index) in List.unitList" :key="item.key" :label="item.label"
                            :value="item.key">
                        </el-option>
                    </el-select>
                </template>
            </ux-table-column>
            <ux-table-column property="codName" title="グループ" width="200" align="center">
                <template slot-scope="scope">
                    <el-select class="SELE" v-model="scope.row.grpCode" placeholder=" "
                        @change="scope.row.smlCode = null">
                        <el-option v-for="(item, index) in List.groupList" :key="item.key" :label="item.label"
                            :value="item.key">
                        </el-option>
                    </el-select>
                </template>
            </ux-table-column>
            <ux-table-column property="codName" title="小グループ" width="200" align="center">
                <template slot-scope="scope">
                    <el-select class="SELE" v-model="scope.row.smlCode" placeholder=" ">
                        <el-option v-for="(item, index) in List.smallGroupList.find(item => item.code == scope.row.grpCode) ?
                            List.smallGroupList.find(item => item.code == scope.row.grpCode).smallGroupList : []"
                            :key="item.key" :label="item.label" :value="item.key">
                        </el-option>
                    </el-select>
                </template>
            </ux-table-column>
            <ux-table-column property="codName" title="用語集利用" width="200" align="center">
                <template slot-scope="scope">
                    <el-select class="SELE" v-model="scope.row.pldwnSet" placeholder=" ">
                        <el-option v-for="(item, index) in List.glossaryList" :key="item.key" :label="item.label"
                            :value="item.key">
                        </el-option>
                    </el-select>
                </template>
            </ux-table-column>
            <ux-table-column property="codSymb" :title="$t('message.environmentSetting.term.table.column_4')"
                align="center">
                <template slot-scope="scope">
                    <el-input class="table-input center" v-model="scope.row.dtlOrdr"
                        @input="scope.row.dtlOrdr = Number($setMyNum(scope.row.dtlOrdr, '3 - 0')) == 0 ? null : Number($setMyNum(scope.row.dtlOrdr, '3 - 0'))">
                    </el-input>
                </template>
            </ux-table-column>
        </ux-grid>

        <div class="footer-wrapper">
            <el-button @click="getDetialsStyleDeFineDataListFn">
                {{ $t("message.environmentSetting.btns.bottomBtn.editor") }}
            </el-button>
            <el-button type="primary" class="okBTn" @click="saveFn">
                {{ $t("message.environmentSetting.btns.bottomBtn.save") }}
            </el-button>
        </div>
    </div>
</template>

<script>
import {
    getDetialsStyleGroup, getDetialsStyleDeFineDataList, getDetialsStyleDeFineCombox, getDelDetialsStyleDeFineTipsMsg, delDetialsStyleDeFine, addDetialsStyleDeFine,
} from "@/api/api";
import $ from "jquery";
export default {
    name: "Unit",
    data() {
        return {
            List: {},
            /**
             * 0=>GlossaryList=>用语集登録=>
             * 1=>GlossaryList=>用语集登録=>
             * 2=>GlossaryList=>用语集登録=>
             * 3=>GlossaryList=>用语集登録=>
             */
            ListValue: 0,
            List1: [],
            List1Value: '',

            loading: false,
            tableHeight: 350,

            tableData: [],
            handRow: {}
        };
    },
    components: {},
    watch: {},
    methods: {
        swapArrayElements(array, index1, index2, preservedKey) {
            [array[index1], array[index2]] = [array[index2], array[index1]];
            if (preservedKey !== undefined && preservedKey in array[index1] && preservedKey in array[index2]) {
                [array[index1][preservedKey], array[index2][preservedKey]] = [array[index2][preservedKey], array[index1][preservedKey]];
            }
            return array;
        },

        sort(sor) {
            const index = this.tableData.findIndex(item => item == this.handRow); // 获取到当前下表

            if (index == 0 && sor == 'top') {
                console.log('最上 return');
                return
            }
            if (index == this.tableData.length - 1 && sor == 'bottom') {
                console.log('最下 return');
                return
            }
            if (sor == 'top') {
                this.swapArrayElements(this.tableData, index, index - 1, 'dtlOrdr');
            }
            if (sor == 'bottom') {
                this.swapArrayElements(this.tableData, index, index + 1, 'dtlOrdr');
            }
            console.log(sor, index);
            this.$set(this.tableData, index, this.tableData[index]);
        },
        addEdit() {
            try {
                this.tableData.push({
                    ctgCode: this.List1Value,
                    dtlName: "",
                    dtlNo: 0,
                    dtlOrdr: this.tableData.length == 0 ? 1 : this.tableData[this.tableData.length - 1].dtlOrdr + 1,
                    grpCode: null,
                    optCommNo: 'null',
                    pldwnSet: null,
                    smlCode: null,
                    unitCode: null
                })
            } catch (error) {
                console.log(error);
            }
        },
        handClick(e) {
            console.log(e);
            this.handRow = e;
        },
        async changeFn(e) {
            await this.getComBoxFn();
            await this.getDetialsStyleDeFineDataListFn();
        },
        // 获取大组下拉框
        async getList1Fn() {
            this.List1.length = 0;
            let D = {};
            let R = await getDetialsStyleGroup(D);
            this.List1 = R.data.data;
            try {
                this.List1Value = this.List1[0].key;
            } catch (error) {
            }
        },
        // 获取下拉框
        async getComBoxFn() {
            let D = { CtgCode: this.List1Value };
            let R = await getDetialsStyleDeFineCombox(D);
            this.List = R.data.data;
            try {
                this.ListValue = this.List.glossaryList[0].key;
            } catch (error) {
            }
        },
        // 定义一个等待指定时间的 Promise 対象
        wait(time) {
            return new Promise(resolve => setTimeout(resolve, time));
        },


        //获取详细仕样列表数据
        async getDetialsStyleDeFineDataListFn() {
            this.loading = true;
            // 调用 wait 函数等待 3 秒后执行后续代码
            this.tableData.splice(0, this.tableData.length);
            let D = { CtgCode: this.List1Value };
            let R;
            R = await getDetialsStyleDeFineDataList(D);
            this.loading = false;
            this.tableData = R.data.data;
            this.tableData.forEach(item => {
                if (item.smlCode == 0) {
                    item.smlCode = null;
                }
            })
            this.handRow = this.tableData[0];
            this.$refs.uxGrid.setCurrentRow(this.tableData[0]);

        },
        //削除tab1
        async getDeltMsgFn() {
            let response;
            response = await getDelDetialsStyleDeFineTipsMsg({});
            return response.data.msg;
        },

        async deltDataFn() {
            const message = await this.getDeltMsgFn();
            try {
                await this.$confirm(message, '', {
                    confirmButtonText: 'OK',
                    cancelButtonText: 'Cancel',
                    type: 'warning'
                });

                await delDetialsStyleDeFine({ CtgCode: this.handRow.ctgCode, DtlNo: this.handRow.dtlNo });

                await this.getComBoxFn();
                await this.getDetialsStyleDeFineDataListFn();
            } catch (error) {
            }
        },
        // 保存
        async saveFn() {
            let D = { CtgCode: this.List1Value, DataList: this.tableData };
            let R = await addDetialsStyleDeFine(D);
            if (!R) {
                return
            }
            this.$message.success(R.data.msg);
            await this.getComBoxFn();
            await this.getDetialsStyleDeFineDataListFn();
        },
        async initFn() {
            await this.getList1Fn();
            await this.getComBoxFn();
            await this.getDetialsStyleDeFineDataListFn();
        }
    },
    created() { },
    mounted() {

        this.initFn();

        let _this = this;
        this.tableHeight = $(".Content").height() - 241;
        this.$nextTick(function () {
            window.addEventListener(
                "resize",
                () => {
                    return (() => {
                        _this.tableHeight = $(".Content").height() - 241;
                    })();
                },
                false
            );
        });
    },
    beforeDestroy() { },
    destroyed() { },
};
</script>
<style lang="scss" scoped>
.Content {
    height: 100%;
    width: 100%;
    position: relative;

    .title {
        width: 100%;
        height: 32px;
        border-bottom: 1px solid #d8d8d8;
        display: flex;
        align-items: center;

        .iconfont {
            margin-right: 10px;
        }

    }

    .tabs-view {
        width: 100%;
        padding: 16px 0;
    }

    .tab-title {
        width: 200px;
        height: 32px;
        background: #ffffff;
        border: 1px solid #dee0e3;
        text-align: center;
        line-height: 32px;
        font-size: 14px;
        color: #1f2329;
        border-right: 0 none;
        transition: 0.5s;
    }

    .active-style {
        background: #106ebe;
        color: #ffffff;
    }

    .tab-title:nth-child(1) {
        border-radius: 4px 0 0 4px;
    }

    .tab-title:nth-child(3) {
        border-right: 1px solid #dee0e3;
        border-radius: 0 4px 4px 0;
    }

    .btn-wrapper {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;

        .bgFFF {
            ::v-deep .el-input__inner {
                width: 240px;
                height: 32px;
                background: #FFF;
            }

            ::v-deep .el-select__caret {
                line-height: 32px;
            }

        }


        button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 68px;
            height: 32px;
            // border: 1px solid #d9d9d9;
            margin-left: 16px;
        }

        button:nth-child(1) {
            width: 32px;
            font-size: 18px;
        }

        button:nth-child(2) {
            width: 32px;
            font-size: 18px;
        }

        .active-button {
            background: #106ebe;
            color: #ffffff;
        }
    }

    .table-input {
        ::v-deep .el-input__inner {
            background: none;
            border: 0 none;
            padding: 0;
        }
    }

    .center {
        ::v-deep .el-input__inner {
            text-align: center;
        }
    }

    .SELE {
        width: 100%;
        height: 32px;

        ::v-deep .el-input__inner {
            background: none;
            border: 0 none;
            padding: 0;
            width: 100%;
            height: 32px;

            padding-left: 10px;
        }

        ::v-deep .el-input__inner:focus {
            border: 1px solid #dcdfe6;
        }

        ::v-deep .el-input__icon {
            line-height: 32px;
            color: #909399;
        }

        ::v-deep .el-input__suffix {
            width: 32px;
            right: 0;
            background: #dee0e3;
        }
    }
}





.footer-wrapper {
    width: 100%;
    // position: absolute;
    // left: 0px;
    // bottom: 0px;
    // height: 47px;
    margin-top: 11px;
    display: flex;
    align-items: center;
    background: rgb(248, 248, 248);

    button {
        // padding: 0 12px;
        // min-width: 82px;
        width: 123px;
        height: 32px;
        // background: #ffffff;
        // border: 1px solid #d9d9d9;
        text-align: center;
        line-height: 32px;
        margin-right: 16px;
    }

    .okBTn {
        // background: #106ebe;
        // color: #fff;
    }
}
</style>
